@import "../../assets/styles/variables";

.dialogs {

  &__item {
    display: flex;
    $item: &;
    margin-bottom: 20px;
    cursor: pointer;
    padding: 2px 0;

    &:hover, &--active {
      opacity: 0.9;
      box-shadow: 0 0 20px 0 rgb(0 0 0 / 4%);
      border-radius: 50px 20px 20px 50px;
      background-color: lighten($lightBlue, 0.2);
    }

    &--avatar {
      flex: 0 0 50px;
      width: 50px;
      height: 50px;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    &-chatName {
      font-weight: 700;
      font-size: 14px;
      flex: 1;
      margin-bottom: 6px;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 200px;
      white-space: nowrap;
    }

    &--online {
      #{$item}--avatar::before {
          display: block;
          position: relative;
          z-index: 4;
          margin-bottom: -13px;
          content: '';
          background-color: $green;
          border-radius: 50px;
          width: 8px;
          height: 8px;
          border: 2px solid $white;
      }
    }

    &-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;

      &-top {
        display: flex;

        span {
          opacity: 0.4;
          font-size: 14px;
        }
      }

      &-medium {
        padding-bottom: 5px;

        p {
          font-size: 13px;
          opacity: 0.4;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 220px;
          white-space: nowrap;
        }
      }

      &-bottom {
        position: relative;
        display: flex;

        p, &-detectedElement {
          font-size: 14px;
          opacity: 0.7;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 220px;
          height: 2em;
          white-space: nowrap;
        }

        &-detectedElement {
          color: rgb(78 90 147);
          font-weight: 500;
        }

        &-count {
          padding: 1px 0;
          position: absolute;
          right: 0;
          bottom: 0;
          background: #4a6a75;
          color: #fff;
          font-weight: bold;
          width: 100%;
          min-width: 18px;
          max-width: 22px;
          height: 18px;
          border-radius: 50%;
          font-size: 11px;
          text-align: center;
          line-height: 18px;
          animation-name: blink;
          animation-timing-function: linear;
          animation-duration: 1.6s;
          animation-iteration-count: infinite;
        }

        .dialog__messageIcon-read {
          width: 17px;
          height: 17px;
          bottom: 0;
          left: auto;
          right: 0;
        }

        .dialog__messageIcon--doubleTicks {
          background-image: url("../../assets/img/doubleTicks.svg");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }

        .dialog__messageIcon--ticks {
          background-image: url("../../assets/img/ticks.svg");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }

      }
    }
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}